<!-- 详情 -->
<template>
	<view>
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500"
			indicator-color="rgb(204,204,204)" indicator-active-color="rgb(136,136,136)"
			v-show="detailList.file.length">
			<swiper-item v-for="(item,index) in detailList.file" :key="index">
				<image style="width: 100%;height: 100%;" mode="scaleToFill	" :src="item.url" @error="imageError">
				</image>
			</swiper-item>
		</swiper>

		<view class="content">
			<p class="title">{{detailList.title}}
				<uni-tag text="VR" @click="toVR" />
			</p>
			<p class="price"><span>{{detailList.price}}</span>
				<span>{{detailList.room}}</span>室<span>{{detailList.living_room}}</span>厅
			</p>

			<view class="information">
				<h1>房源信息</h1>
				<view class="grid">
					<view>
						<view class="grid-item-box">
							<p>租金</p>
							<text class="text">{{detailList.price}}</text>
						</view>
					</view>
					<view>
						<view class="grid-item-box">
							<p>朝向</p>
							<text class="text">{{detailList.orientations}}</text>
						</view>
					</view>
					<view>
						<view class="grid-item-box">
							<p>装修</p>
							<text class="text">{{detailList.renovation}}</text>
						</view>
					</view>
					<view>
						<view class="grid-item-box">
							<p>楼层</p>
							<text class="text">{{detailList.floor}}/{{detailList.total_floor}}层</text>
						</view>
					</view>
					<view>
						<view class="grid-item-box">
							<p>类型</p>
							<text class="text">{{detailList.floor}}住宅</text>
						</view>
					</view>
					<view>
						<view class="grid-item-box">
							<p>更新</p>
							<text class="text">19分钟前</text>
						</view>
					</view>
				</view>
			</view>

			<view class="information">
				<h1>房源特色</h1>
				<view class="feature">
					<h4>核心卖点</h4>
					<view> 原始装修三室两厅一卫客厅朝阳两卧室朝阳楼层好 苏外名额没用 各出各税 </view>

					<h4>业主心态</h4>
					<view>
						业主诚心出售此房，积极配合看房和达成协议后的各项手续。产权清晰无纠纷,看房方便，房主诚意出售
					</view>

					<h4>服务介绍</h4>
					<view class="">
						<p>我从事房产工作已有多年,经验丰富。</p>
						<p>1:能够精准的根据每一位客户的详细需求匹配到性价比合适的</p>
						<p>2:和业主议价是我的强项，让每位客户真正的省钱3:我们的服务能让您物超所值</p>
						<p>4:您的买房安家之旅，让您更加安心放心省心</p>
					</view>
				</view>
			</view>

			<view class="map">
				<h1>位置及周边</h1>
				<view class="map_content">

				</view>
			</view>

			<view class="recommend">
				<h1>推荐房源</h1>
				<view class="recomment_content">
					<view class="card" v-for="(item,index) in news" :key="index" @click="todel(item)">
						<image style="width: 100px; height: 75px; background-color: #eeeeee;margin-right: 10px;"
							:src="item.img" mode="">
						</image>
						<view class="card_text">
							<p class="card_title">{{item.title}}</p>
							<p class='crad_price'>{{item.price}}</p>
							<p class="card_city" v-if="item.city">{{item.city}}</p>
							<p class="card_room">{{item.room}}室{{item.living_room}}厅{{item.acreage}}</p>
							<p class="card_address">{{item.address}}</p>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="box">

		</view>

		<!-- 底部按钮 -->
		<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailList: {},
				news: [],
				options: [{
					icon: 'headphones',
					text: '陈东红'
				}, {
					icon: 'star',
					text: '收藏'
				}],
				buttonGroup: [{
						text: '在线咨询',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '电话咨询',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]

			}
		},
		methods: {
			async getDetail(id, type) {

				const result = await uni.request({
					url: `http://api.shbwyz.com/api/rental/${id}`
				})
				if (result[1].data.code === 200) {
					this.detailList = result[1].data.data;
				}


				const result1 = await uni.request({
					url: "http://api.shbwyz.com/api/rental.html"
				})
				console.log(result, '=================')
				if (result1[1].data.code === 200) {
					this.news = result1[1].data.data.slice(0, 6)
				}
			},
			toVR() {
				uni.navigateTo({
					url: '/pages/VR/VR'
				})
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option);
			this.getDetail(option.id, option.type)
		}
	}
</script>

<style>
	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.content {
		font-size: 1.31832rem;
		padding: 0.7324rem 1.61128rem;
	}

	.title {
		line-height: 1.874944rem;
		color: #2c2c2d;
		font-weight: 400;
		margin-bottom: 5px;
	}

	.price {
		font-size: 12px;
		color: rgb(248, 103, 107);
	}

	.price span {
		font-size: 16px;
	}

	.price span:nth-child(2) {
		margin-left: 5px;
	}

	.information {
		margin-top: 20px;
	}

	.information h1 {
		font-weight: bold;
		margin: 10px 0;
	}

	/* 宫格 */
	.grid {
		width: 100%;
		/* height: auto; */
		display: grid;
		grid-template-columns: auto auto auto;
	}

	.grid-item-box p {
		font-size: 12px;
		color: rgb(168, 168, 168);
	}

	.grid-item-box text {
		font-size: 15px;
	}

	/* 服务特色 */
	.feature h4 {
		height: 20px;
		line-height: 20px;
		border-left: solid 5px red;
		margin: 5px 0;
		font-weight: bold;
		text-indent: 5px;
		color: black;
	}

	.feature view {
		font-size: 17px;
		color: rgb(98, 97, 100);
		line-height: 25px;
	}

	/* 地图 */
	.map h1 {
		font-weight: bold;
		margin: 10px 0;
	}

	.map_content {
		width: 100%;
		height: 200px;
		background: lightgreen;
	}

	/* 房源推荐 */
	.recommend h1 {
		font-weight: bold;
		margin: 10px 0;
	}

	.recomment_content {
		width: 100%;
		height: auto;
	}

	.card {
		display: flex;
		/* height: 250px; */
		padding: 15px 0;
		margin: 0 8px;
		justify-content: flex-start;
	}

	.card_text {
		flex: 1;
		width: 100%;
		font-size: 12px;
	}

	.card_text p:not(.card_title) {
		color: #919191;
	}

	.card_text .crad_price {
		float: right;
		color: #00ac00 !important;
		font-weight: 700;
		position: absolute;
		right: 15px;
	}

	/* 底部导航 */
	.uni-goods-nav {
		position: fixed !important;
		bottom: 0;
		width: 100%;
	}

	/* 占位 */
	.box {
		width: 100%;
		height: 50px;
	}
</style>
